/*
 * @Author: zhaoqr
 * @Date: 2024-06-12
 * @LastEditTime: 2024-09-27
 * @LastEditors: zhaoqr zhaoqr@channelsoft.com
 * @Description:
 * @FilePath: \vue3-template\src\pages\first\index.tsx
 */

import { defineComponent, Transition, KeepAlive, onMounted, ref, proxyRefs } from 'vue';
import Arrays from '../../components/Arrays';
import Promise from '../../utils/Promise';
import ES from '../../utils/ES2024';
import WeakMap from '../../utils/WeakMap';
import './index.scss';
import jsonStringfy from '../../utils/jsonStringfy';
import reduce from '../../utils/reduce';

const DefaultComponent = defineComponent({
  setup() {
    // console.log(jsonStringfy({ a: 1, b: 2 }));
    // console.log(jsonStringfy([1, 2, 3, 4, 4, { a: 1, b: [1, 2, 3] }]));
    // console.log(jsonStringfy(null));
    // console.log(jsonStringfy(undefined));
    // console.log(JSON.stringify({ a: 1, b: 2 }));
    // console.log(JSON.stringify([1, 2, 3, 4, 4, { a: 1, b: [1, 2, 3] }]));
    const array = [1, 2, 3, 4, 5, 6];
    const res = array.reduce((a, b) => {
      console.log(a, b);
      return a + b;
    }, 5);
    console.log(res, '=');
    console.log(
      reduce([1, 2, 3, 4, 5, 6], (a, b) => a + b, 5),
      '自定义'
    );
    // ES.ES2023();
    function sort(array: Array<any>) {
      for (let i = 0; i < array.length - 1; i++) {
        for (let j = 0; j < array.length - 1 - i; j++) {
          if (array[j] > array[j + 1]) {
            [array[j], array[j + 1]] = [array[j + 1], array[j]];
          }
        }
      }
      return array;
    }
    // console.log(sort([3, 4, 5, 6, 21, 1, 45, 20, 1]));

    function interval(func: Function, delay: number) {
      setTimeout(function loop() {
        func();
        setTimeout(loop, delay);
      }, delay);
    }
    interval(() => {
      // console.log(new Date());
    }, 1000);
    onMounted(() => {
      document.addEventListener('DOMContentLoaded', () => {
        const ele = document.querySelectorAll('.container');
        if (ele) {
          const observer = new IntersectionObserver(
            entries => {
              console.log(entries);
              entries.forEach(entry => {
                if (entry.isIntersecting) {
                  console.log('进入可视区域');
                  // observer.unobserve(entry.target);
                } else {
                  console.log('离开可视区域');
                }
              });
            },
            { threshold: 1 }
          );
          ele.forEach(element => observer.observe(element));
        }
      });
      document.addEventListener('DOMContentLoaded', function () {
        const container = document.querySelector('.scroll-container');
        const items = document.querySelectorAll('.scroll-item');
        const byClass = document.getElementsByClassName('scroll-item');
        const tagName = document.getElementsByTagName('div');
        console.log(container!.childNodes, 'container');
        console.log(container!.children, 'container.children');
        const newParagraph = document.createElement('p');
        newParagraph.textContent = 'New paragraph';
        container!.appendChild(newParagraph);

        // 添加后的状态
        console.log(container!.childNodes, 'After adding a new child');
        console.log(items, 'items');
        console.log(byClass, 'byClass');
        console.log(tagName, 'tagName');
      });
    });
  },
  render() {
    const container = 'container';
    return (
      <div>
        {/* <img src="https://qianrui-xiaoyang.oss-cn-hangzhou.aliyuncs.com/img/channelsoft/scene.webp" style="opacity:0.4" alt="" /> */}
        {/* <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <image href="https://qianrui-xiaoyang.oss-cn-hangzhou.aliyuncs.com/img/channelsoft/scene.webp" x="0" y="0" width="200" height="200" opacity="0.1" />
        </svg> */}
        <div class="scroll-container">
          <div class="scroll-item">Item 1</div>
          <div class="scroll-item">Item 2</div>
          <div class="scroll-item">Item 3</div>
          <div class="scroll-item">Item 4</div>
        </div>
        {/* 可是区域测试代码 */}
        <div class={container}>
          Hello
          <span>World</span>
        </div>
        <div class={container}>
          你好
          <span>世界</span>
        </div>
      </div>
    );
  },
});

export default defineComponent({
  render() {
    return (
      <KeepAlive>
        <Transition name="fade">
          <div>
            <DefaultComponent />
            <Arrays />
          </div>
        </Transition>
      </KeepAlive>
    );
  },
});
